<template>
  <div>
    <img :src="image" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: ''
    }
  },
  created() {
    this.createImgUrlForName()
  },
  mounted() {

  },
  methods: {

    // yellow
    /**
     * 根据名字生成头像
     */
    createImgUrlForName(name = '张三', backgroundColor = "#86E8DD", fontColor = "#000") {
      let canvasEle = document.createElement("canvas");
      let ctx = canvasEle.getContext('2d');
      canvasEle.width = 200;
      canvasEle.height = 200;
      let cWidth = ctx.canvas.width;
      let cHeight = ctx.canvas.height;
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, cWidth, cHeight)
      let fontSize = canvasEle.width * 0.8;
      ctx.font = fontSize + 'px 黑体';
      ctx.fillStyle = fontColor;
      ctx.fillText(name[0], cWidth / 2 - fontSize / 2, cHeight / 2 + fontSize / 3);
      var tempSrc = canvasEle.toDataURL("image/png");
      console.log("tempSrc", tempSrc);
      this.image = tempSrc;
      return tempSrc;
    }
  },
}
</script>

<style scoped>
</style>